// 获取API数据
async function fetchData() {
    try {
        const [projectsResponse, aboutResponse] = await Promise.all([
            fetch('/api/projects'),
            fetch('/api/about')
        ]);

        const projects = await projectsResponse.json();
        const about = await aboutResponse.json();

        // 根据当前页面渲染相应内容
        const currentPage = window.location.pathname.split('/').pop();
        
        if (currentPage === 'index.html' || currentPage === '') {
            renderShowcase(projects);
        } else if (currentPage === 'about.html') {
            renderAbout(about);
        } else if (currentPage === 'projects.html') {
            renderProjects(projects);
            setupProjectFilters(projects);
        } else if (currentPage === 'contact.html') {
            renderSocialLinks(about.socialLinks);
        }
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

// 渲染首页展示
function renderShowcase(projects) {
    const showcaseContainer = document.getElementById('showcase-container');
    if (!showcaseContainer) return;

    // 只显示前3个项目
    const showcaseProjects = projects.slice(0, 3);
    
    showcaseProjects.forEach(project => {
        const projectCard = document.createElement('div');
        projectCard.className = 'project-card';
        
        projectCard.innerHTML = `
            <img src="${project.imageUrl}" alt="${project.title}">
            <div class="project-info">
                <h3>${project.title}</h3>
                <p>${project.description}</p>
                <span class="project-category">${project.category}</span>
            </div>
        `;
        
        showcaseContainer.appendChild(projectCard);
    });
}

// 渲染项目页面
function renderProjects(projects) {
    const projectsContainer = document.getElementById('projects-container');
    if (!projectsContainer) return;
    
    projectsContainer.innerHTML = '';
    
    projects.forEach(project => {
        const projectCard = document.createElement('div');
        projectCard.className = 'project-card';
        projectCard.dataset.category = project.category;
        
        projectCard.innerHTML = `
            <img src="${project.imageUrl}" alt="${project.title}">
            <div class="project-info">
                <h3>${project.title}</h3>
                <p>${project.description}</p>
                <span class="project-category">${project.category}</span>
            </div>
        `;
        
        projectCard.addEventListener('click', () => showProjectDetails(project));
        projectsContainer.appendChild(projectCard);
    });
}

// 设置项目过滤器
function setupProjectFilters(projects) {
    const filterButtons = document.querySelectorAll('.filter-btn');
    const projectCards = document.querySelectorAll('.project-card');

    filterButtons.forEach(button => {
        button.addEventListener('click', () => {
            // 更新活动按钮
            filterButtons.forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');

            const filter = button.dataset.filter;
            
            projectCards.forEach(card => {
                if (filter === 'all' || card.dataset.category === filter) {
                    card.style.display = 'block';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });
}

// 显示项目详情
function showProjectDetails(project) {
    const detailsSection = document.getElementById('project-details');
    if (!detailsSection) return;

    document.getElementById('detail-title').textContent = project.title;
    document.getElementById('detail-description').textContent = project.description;
    document.getElementById('detail-image').src = project.imageUrl;
    document.getElementById('detail-date').textContent = project.date.toLocaleDateString();
    document.getElementById('detail-category').textContent = project.category;

    // 添加项目特点
    const featuresList = document.getElementById('detail-features');
    featuresList.innerHTML = '';
    const features = [
        '响应式设计',
        '现代化UI',
        '高性能实现',
        '用户友好体验'
    ];
    features.forEach(feature => {
        const li = document.createElement('li');
        li.textContent = feature;
        featuresList.appendChild(li);
    });

    // 滚动到详情部分
    detailsSection.scrollIntoView({ behavior: 'smooth' });
}

// 渲染关于页面
function renderAbout(about) {
    // 更新标题和描述
    const aboutTitle = document.getElementById('about-title');
    const aboutDescription = document.getElementById('about-description');
    if (aboutTitle) aboutTitle.textContent = about.title;
    if (aboutDescription) aboutDescription.textContent = about.description;
    
    // 渲染技能标签
    const skillsContainer = document.getElementById('skills-container');
    if (skillsContainer) {
        about.skills.forEach(skill => {
            const skillTag = document.createElement('span');
            skillTag.className = 'skill-tag';
            skillTag.textContent = skill;
            skillsContainer.appendChild(skillTag);
        });
    }
}

// 渲染社交链接
function renderSocialLinks(socialLinks) {
    const socialLinksContainer = document.getElementById('social-links');
    if (!socialLinksContainer) return;

    socialLinks.forEach(link => {
        const socialLink = document.createElement('a');
        socialLink.href = link;
        socialLink.className = 'social-link';
        socialLink.target = '_blank';
        
        if (link.includes('github')) {
            socialLink.innerHTML = '<i class="fab fa-github"></i>';
        } else if (link.includes('linkedin')) {
            socialLink.innerHTML = '<i class="fab fa-linkedin"></i>';
        } else if (link.includes('twitter')) {
            socialLink.innerHTML = '<i class="fab fa-twitter"></i>';
        }
        
        socialLinksContainer.appendChild(socialLink);
    });
}

// 处理联系表单提交
document.addEventListener('DOMContentLoaded', () => {
    const contactForm = document.getElementById('contactForm');
    if (contactForm) {
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const data = Object.fromEntries(formData.entries());
            
            // 这里可以添加发送表单数据的逻辑
            console.log('Form submitted:', data);
            
            // 显示成功消息
            alert('消息已发送！我们会尽快回复您。');
            this.reset();
        });
    }
});

// 页面加载完成后获取数据
document.addEventListener('DOMContentLoaded', fetchData);

// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({
                behavior: 'smooth'
            });
        }
    });
}); 